<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		
		.container{
			margin: 50px auto;
			width: 800px;
			height: 800px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: flex-start;
		}
		.container>div{
			width:250px;
			height: 250px;
			background-color: skyblue;
			color: #000;
			text-align: center;
			line-height: 250px;
			font-size: 40px;
		}
		button{
			width: 100px;
			height: 60px;
			font-size: 30px;
		}
	</style>
	<body>
		<!-- <div class="container">
		        <div index_roll="1">火锅</div>
		        <div index_roll="2">800元优惠券</div>
		        <div index_roll="3">1000元优惠券</div>
		        <div index_roll="0">800元优惠券</div>
				<div index_roll="4">600元优惠券</div>
				<div index_roll="7">600元优惠券</div>
				<div index_roll="6">1000元优惠券</div>
				<div index_roll="5">800元优惠券</div>
		        <div index_roll="8">
		            <button>开始</button>
		        </div>
				<div index_roll="9">
				    <button>停止</button>
				</div>
				<div index_roll="10">600元优惠券</div>
				<div index_roll="11">1000元优惠券</div>
				<div index_roll="12">800元优惠券</div>
		        <div index_roll="13">600元优惠券</div>
		        <div index_roll="14">600元优惠券</div>
		        <div index_roll="15">1000元优惠券</div>
		        <div index_roll="16">800元优惠券</div>
		    </div>
		 -->

<div class="container">
		        <div index_roll="1">火锅</div>
		        <div index_roll="2">烤鱼</div>
		        <div index_roll="3">烤肉</div>
		        <div index_roll="0">料理</div>
				
		        <div index_roll="8">
		            <button>开始</button>
					<button>停止</button>
		        </div>
				<div index_roll="4">地锅鸡</div>
				<div index_roll="7">自助餐</div>
				<div index_roll="6">家常菜</div>
				<div index_roll="5">粤菜</div>
		    </div>
	</body>
	<script>
		var divs = document.querySelectorAll(".container>div")
		        var btns = document.querySelectorAll(".container>div>button");
		
		        var timeId = null;
		        var index = 0;
		        btns[0].onclick = function () {
		            clearInterval(timeId);
		            timeId = setInterval(() => {
		                for (var j = 0; j < divs.length; j++) {
		                    divs[j].style.backgroundColor = "skyblue";
		                }
		                for (var i = 0; i < divs.length; i++) {
		                    if (Number(divs[i].getAttribute("index_roll")) == index%8) {
		                        divs[i].style.backgroundColor = "grey";
		                        break;
		                    }
		                }
		                index++;
		            }, 20);
		        }
		        btns[1].onclick= function () {
		            clearInterval(timeId)
		        }
		

	</script>
</html>